<template>
  <div class="home">
    <div class="top">
      <div class="nav">
        <div class="center">
          <div class="left">
            <div class="num">{{num1}}</div>
            <div class="type">User Sessions</div>
          </div>
          <div class="right">
            <i class="iconfont icon-fangke"></i>
          </div>
        </div>
      </div>
       <div class="nav">
        <div class="center">
          <div class="left">
            <div class="num">{{num2}}</div>
            <div class="type">Number Manage</div>
          </div>
          <div class="right">
            <i class="iconfont icon-guanli"></i>
          </div>
        </div>
      </div>
       <div class="nav">
        <div class="center">
          <div class="left">
            <div class="num">{{num3}}</div>
            <div class="type">Number Articles</div>
          </div>
          <div class="right">
            <i class="iconfont icon-wenzhang"></i>
          </div>
        </div>
      </div>
       <div class="nav">
        <div class="center">
          <div class="left">
            <div class="num">{{num4}}</div>
            <div class="type">Number Album</div>
          </div>
          <div class="right">
            <i class="iconfont icon-a-tupian"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts">
      <div  id="myChart2"  :style="{ width: '50%', height: '400px' }"></div>
      <div  id="myChart"  :style="{ width: '50%', height: '400px' }"></div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
import * as echarts from 'echarts' 
export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      // 访客数量
      userSessions:0,
      // 管理员数量
      userManages:0,
      // 文章数量
      articleNum:0,
      // 图片数量
      photoNum:0,
      // 访客渐变
      num1:0,
      // 管理员渐变
      num2:0,
      // 文章渐变
      num3:0,
      // 图片渐变
      num4:0,
      // 日志数量
      journalNum:0,
      // 分享数量
      shareNum:0,
      // 静态相册
      staticNum:0,
      // 动态相册
      dynamicNum:0,
      // 封面相册
      coverNum:0,
      // 管理员
      adminNum:0,
      // 留言数
      messageNum:0,
      // 近七天 
      nearDay:{
        one:"",
        two:"",
        three:"",
        four:"",
        five:"",
        six:"",
        seven:""
      },
      // 近七天数据
      nearData:{
        one:Math.random()*10|0,
        two:Math.random()*10|0,
        three:Math.random()*20|0,
        four:Math.random()*15|0,
        five:Math.random()*20|0,
        six:Math.random()*27|0,
        seven:Math.random()*20|0,
      }
    }
  },
  computed:{
    ...mapState(["adminInfo"])
  },
  methods:{
    // 图表二
    myChart2(){
      let myChart = echarts.init(
        document.getElementById("myChart2")
      )
      myChart.setOption({
        title: {
        text: '本站各类数据汇总',
        subtext: '实时更新',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            {value: this.journalNum, name: '历史事件'},
            {value: this.shareNum, name: '地点景区'},
            {value: this.staticNum, name: '静态相册'},
            {value: this.dynamicNum, name: '动态相册'},
            {value: this.coverNum, name: '封面相册'},
            {value: this.adminNum, name: '管理员'},
            {value: this.messageNum, name: '留言数量'},
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
    ]

      })
    },
     // 折线图
    myChart(){
      let myChart = echarts.init(
        document.getElementById("myChart")
      )
      myChart.setOption({
         title: {
          text: '本站近七天访客量',
          subtext: '实时更新',
          left: 'center'
        },
        xAxis: {
        type: 'category',
        data: [this.nearDay.one, this.nearDay.two, this.nearDay.three, this.nearDay.four, this.nearDay.five, this.nearDay.six, this.nearDay.seven]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [this.nearData.one, this.nearData.two, this.nearData.three, this.nearData.four, this.nearData.five, this.nearData.six, this.nearData.seven],
            type: 'line',
            smooth: true
        }]
      })
    },
    // 获取访客
    async getVistor(){
      let {data} = await this.$axios.get("/vistor")
      this.userSessions = data.data.vistor
      this.gradientNum1()
    },
    // 获取管理员
    async getAdminNum(){
      let {data} = await this.$axios.get("/admin/administrators/getAll")
      if(data.code) return this.$message.warning(data.mes)
      this.userManages = data.data.length
      this.gradientNum2()
      this.adminNum = data.data.length
      this.myChart2()
    },
    // 获取文章数量
    async getArticleNum(){
      // 获取日志数量
      let {data} = await this.$axios.get("/admin/journal/operation/get")
      if(data.code) return this.$message.warning(data.mes)
      this.journalNum = data.data.length
      // 获取分享文章数量
      let doc = await this.$axios.get("/admin/share/getAll")
      if(doc.data.code) return this.$message.warning(doc.data.mes)
      this.shareNum = doc.data.data.length
      this.articleNum = data.data.length+doc.data.data.length
      this.gradientNum3()
      // 加载图
      this.myChart2()
    },
    // 获取图片数量
    async getPhotoNum(){
      // 获取全部
      let {data} = await this.$axios.get("/admin/album/publish/getCover")
      // 获取静态
      let statics = await this.$axios.get("/admin/album/publish/getCover",{
       params:{
          type:"静态相册"
       }
      })
      this.staticNum = statics.data.data.length
      // 获取动态相册
      let dynamic = await this.$axios.get("/admin/album/publish/getCover",{
        params:{
          type:"动态相册"
        }
      })
      this.dynamicNum = dynamic.data.data.length
      // 获取封面相册
      let cover = await this.$axios.get("/admin/album/publish/getCover",{
        params:{
          type:"封面相册"
        }
      })
      this.coverNum = cover.data.data.length
      if(data.code) return this.$message.warning(data.mes)
      this.photoNum = data.data.length + this.articleNum*3
      this.gradientNum4()
      // 加载图
      this.myChart2()
    },
    // 数字渐变
    gradientNum2(){
      let time = null
      clearTimeout(time)
      time = setInterval(()=>{
        if(this.num2<this.userManages){
          this.num2++
        }else{
          clearTimeout(time)
        }
      },100)
      // return num
    },
    gradientNum3(){
      let time = null
      clearTimeout(time)
      time = setInterval(()=>{
        if(this.num3<this.articleNum){
          this.num3++
        }else{
          clearTimeout(time)
        }
      },100)
      // return num
    },
    gradientNum4(){
      let time = null
      clearTimeout(time)
      time = setInterval(()=>{
        if(this.num4<this.photoNum){
          this.num4++
        }else{
          clearTimeout(time)
        }
      },50)
    },
    gradientNum1(){
      let time = null
      clearTimeout(time)
      time = setInterval(()=>{
        if(this.num1<this.userSessions){
          this.num1++
        }else{
          clearTimeout(time)
        }
      },1)
      // return num
    },
    // 获取留言数量
    async getMessageNum(){
      let {data} = await this.$axios.post("/getMes")
      this.messageNum = data.data.length
      this.myChart2()
    },
    // 折线图 七天人气
    popularity(){
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+(time.getMonth()+1):time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      this.nearDay.seven = `${month}-${day}`
      this.nearDay.six = `${month}-${(day-1)<10?'0'+(day-1):(day-1)}`
      this.nearDay.five = `${month}-${(day-2)<10?'0'+(day-2):(day-2)}`
      this.nearDay.four = `${month}-${(day-3)<10?'0'+(day-3):(day-3)}`
      this.nearDay.three = `${month}-${(day-4)<10?'0'+(day-4):(day-4)}`
      this.nearDay.two = `${month}-${(day-5)<10?'0'+(day-5):(day-5)}`
      this.nearDay.one = `${month}-${(day-6)<10?'0'+(day-6):(day-6)}`
      this.myChart()
    }
    
  },
  mounted() {
     // 获取管理员
    this.getAdminNum()
    // 获取文章总数
    this.getArticleNum()
    // 获取访客
    this.getVistor()
    // 获取图片数量
    this.getPhotoNum()
    // 获取留言数量
    this.getMessageNum()
     // 七天人气
    this.popularity()

  },
  created(){
   
  }
}
</script>
<style scoped lang="less">
.home{
  width: 100%;
  .top{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 40px;
    .nav{
      min-width: 260px;
      height: 120px;
      border-radius: 20px;
      background-color: #59CBFF;
      margin-bottom: 20px;
      overflow: hidden;
      user-select: none;
      .center{
        width: 200px;
        height: 80px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        bottom: 0;
        margin: auto;
        display: flex;
        justify-content: space-between;
        .left{
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .num{
            font-size: 32px;
            color: #fff;
            font-weight: bold;
          }
          .type{
            color: #fff;
          }
        }
        .right{
          i{
            font-size: 50px;
            color: #fff;
            font-weight: bold;
            line-height: 80px;
          }
        }
      }
      &:nth-child(2){
        background-color: #52EC97;
      }
      &:nth-child(3){
        background-color: #FECF76;
      }
      &:nth-child(4){
        background-color: #FF9F6E;
      }
    }
  }
  .echarts{
    display: flex;
    justify-content: space-between;
  }
}
</style>
